<template>
  <uni-popup ref="popup" type="center" :animation="true">
    <view class="info-popup animate-popup">
      <view class="info-title">个人信息</view>
      
      <view class="info-section">
        <view class="section-title">我的特长</view>
        <view class="section-content">
          <text>• 项目管理能力出色</text>
          <text>• 沟通协调能力强</text>
          <text>• 技术创新思维活跃</text>
        </view>
      </view>
      
      <view class="info-section">
        <view class="section-title">我的优点</view>
        <view class="section-content">
          <text>• 责任心强，工作认真</text>
          <text>• 团队协作精神好</text>
          <text>• 学习能力强</text>
        </view>
      </view>
      
      <view class="info-section">
        <view class="section-title">我的老板</view>
        <view class="section-content">
          <text>• 姓名：张三</text>
          <text>• 职位：技术总监</text>
          <text>• 特点：严谨专业，关心下属</text>
        </view>
      </view>
      
      <view class="button-group">
        <button class="btn save-btn" @click="handleSave">保存信息</button>
        <button class="btn cancel-btn" @click="handleCancel">取消</button>
      </view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const popup = ref();
const emit = defineEmits(['save', 'cancel']);

// 打开弹框
const open = () => {
  popup.value?.open();
};

// 关闭弹框
const close = () => {
  popup.value?.close();
};

// 保存按钮处理
const handleSave = () => {
  emit('save');
  close();
};

// 取消按钮处理
const handleCancel = () => {
  emit('cancel');
  close();
};

// 暴露方法给父组件
defineExpose({
  open,
  close
});
</script>

<style lang="scss">
@keyframes popupIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.info-popup {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 40rpx;
  width: 600rpx;
  animation: popupIn 0.3s ease-out forwards;
  transform-origin: center center;
  
  .info-title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
    color: #333;
  }
  
  .info-section {
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .section-content {
      text {
        display: block;
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 10rpx;
      }
    }
  }
  
  .button-group {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
    
    .btn {
      width: 45%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 40rpx;
      font-size: 28rpx;
    }
    
    .save-btn {
      background: #07c160;
      color: #ffffff;
      
      &:active {
        opacity: 0.8;
      }
    }
    
    .cancel-btn {
      background: #f5f5f5;
      color: #333;
      
      &:active {
        background: #e5e5e5;
      }
    }
  }
}
</style> 